<template>
	<view class="tabbar-main">
		<view class="tabbar"  :style="{'padding-bottom': paddingBottomHeight + 'rpx;background-image:url('+bg+')'}">
			<view
			class="tabbar-item"
			 :class="index == 2 ? 'mt' : ''"
			v-for="(item,index) in tabNav"
			:key="index"
			@click="tabbarChange(item.pagePath,index)"
			>
				<image class="item-img" :class="index == 2 ? 'live' : ''" :src="item.selectedIconPath" v-if="current == index"></image>
				<image class="item-img" :class="index == 2 ? 'live' : ''" :src="item.iconPath" v-else></image>
				<view 
				class="item-text" 
				:class="{'tabbarActive': current == index}"
				 style="color: #A3A3A3;font-size: 20rpx"
				v-if="item.text">{{item.text}}</view>
			</view>
		</view>
		<view class="zw">
			
		</view>
	</view>
</template>
 
<script>
	export default {
		props: {
			current: String,
		},
		data() {
			return {
				tabNav: [],
				paddingBottomHeight: 0 ,//iPhonex以上手机底部适配高度
				imgUrl: this.$http.baseUrl, // 服务器域名
				bg: this.$http.baseUrl + '/static/web/img/8d2fd207d37054a33dc342403bf2855.png',
				selectedIndex: 0,
				showselected: false,
			}
		},
		created() {
			//适配iPhonex以上的底部
			// uni.getSystemInfo({
			// 	success: (res) => {
			// 		let model = ['X', 'XR', 'XS', '11', '12', '13', '14', '15'];
			// 		// console.log('iphone',res)
			// 		for (let i=0;i<=model.length;i++) {
			// 			if(res.model.indexOf(model[i]) != -1 && res.model.indexOf('iPhone') != -1) {
			// 				this.paddingBottomHeight = 0
   //                           //向父组件传递tabbar高度
			// 				this.$emit('tabbarHeight',150)
			// 				return
			// 			}else {
			// 				this.$emit('tabbarHeight',100)
			// 			}
			// 		}
			// 	}
			// })
            // 根据权限配置对应tab导航
			let list1 =  [{
				"pagePath": "/pages/home/home",
				"iconPath": "/static/icon/tab/home.png",
				"selectedIconPath": "/static/icon/tab/home_c.png",
				"text": "大厅"
			},
			{
				"pagePath": "/pages/square/square",
				"iconPath": "/static/icon/tab/active.png",
				"selectedIconPath": "/static/icon/tab/active_c.png",
				"text": "广场"
			},
			{
				"pagePath": "/pages/live/live",
				"iconPath": "/static/icon/tab/live.png",
				"selectedIconPath": "/static/icon/tab/live.png",
				"text": "红娘直播"
			},
			{
				"pagePath": "/pages/chat/chat_list/chat_list",
				"iconPath": "/static/icon/tab/chat.png",
				"selectedIconPath": "/static/icon/tab/chat_c.png",
				"text": "消息"
			},
			{
				"pagePath": "/pages/my/my",
				"iconPath": "/static/icon/tab/my.png",
				"selectedIconPath": "/static/icon/tab/my_c.png",
				"text": "我的"
			}
		]
			this.tabNav = list1
			uni.hideTabBar()
		},
		methods: {
            //跳转切换tab
			tabbarChange(path) {
				if(path == '/pages/live/live'){
					uni.redirectTo({
						url: path
					});
				}else {
					uni.switchTab({
						url: path
					})
				}
			},
	
		} 
	}
</script>

<style scoped lang="scss">
	.tabbar-main {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		z-index: 999999;
	}
	.tabbarActive{
	    color: #000 !important;
	}
	.mt {
		height: 230rpx;
		padding-bottom: 75rpx;
	}
	.live {
		width: 120rpx !important;
		height: 120rpx !important;
	}
	.tabbar{
	    display: flex;
	    justify-content: space-around;
	    align-items: center;
	    width: 100%;
	    height: 120rpx;
		background-size: 100% 100%;
	}
	.zw {
		width: 100%;
		height: env(safe-area-inset-bottom);
		background-color: #FFFFFF;
	}
	.tabbar-item{
		flex: 1;
	    display: flex;
	    flex-direction: column;
	    align-items: center;
		justify-content: space-between;
	}
	.item-img{
	    margin-bottom: 4rpx;
	    width: 46rpx;
	    height: 46rpx;
	}
	.item-name{
		font-size: 24rpx !important;
		font-family: PingFangSC-Light, PingFang SC;
		font-weight: 300;
		color: #BBC3D3 !important;
	}
</style>
